<!--
 * @Author: 邵渊
 * @LastEditors: 邵渊
 * @Description: 表格查询面板
-->
<template>
  <div class="table-query-panel">
    <div class="container">
      <div class="container-form" id="formContainer" ref="formContainerRef">
        <el-form
          ref="ruleFormRef"
          :inline="true"
          :model="searchConfig.formList"
          label-position="top"
          class="demo-form-inline"
        >
          <slot name="searchBar">
            <!-- 搜索条插槽 -->
          </slot>
        </el-form>
      </div>
      <div class="container-control">
        <div class="control-btn">
          <el-button type="primary" style="min-width: 20px" @click="onSubmit"
            >查询</el-button
          >
          <el-button style="min-width: 20px" @click="onReset">重置</el-button>
          <el-button-group class="btn-group">
            <el-popover
              placement="bottom"
              title="布局"
              :width="200"
              trigger="click"
            >
              <template #reference>
                <el-button style="min-width: 20px" :icon="Switch" />
              </template>
              <el-radio-group
                v-model="columnRadio"
                style="min-width: 120px"
                @change="columnRadioChange"
              >
                <el-radio value="1" size="large">单列</el-radio>
                <el-radio value="2" size="large">两列</el-radio>
                <el-radio value="3" size="large">三列</el-radio>
                <el-radio value="4" size="large">四列</el-radio>
              </el-radio-group>
            </el-popover>
            <el-popover
              placement="bottom"
              title="排序"
              :width="800"
              trigger="click"
            >
              <template #reference>
                <el-button style="min-width: 20px" :icon="Finished" />
              </template>
              <div ref="sortableContainer" class="group-drag">
                <div
                  v-for="element in dragList"
                  :key="element.name"
                  class="item"
                >
                  {{ element.name }}12
                </div>
              </div>
            </el-popover>
            <el-button
              style="min-width: 20px"
              @click="isShowHistory = !isShowHistory"
              :icon="DArrowRight"
            />
          </el-button-group>
        </div>
        <div class="control-history" v-show="isShowHistory">
          <p style="font-size: 14px; color: #333">查询方案：</p>
          <el-tag
            v-for="tag in historyTags"
            style="margin: 6px 0px"
            :key="tag.value"
            closable
            :type="tag.type"
            @close="historyClose(tag)"
          >
            {{ tag.label }}
          </el-tag>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
import { Finished, Switch, DArrowRight } from "@element-plus/icons-vue";
import Sortable from "sortablejs";

const emit = defineEmits([
  "columnRadioUpdate",
  "dragListUpdate",
  "handleSubmit",
  "historyUpdate",
  "handleReset",
]);

const props = defineProps({
  // 搜索条件配置信息
  searchConfig: {
    type: Object,
    default: () => {},
  },
});

const isShowHistory = ref(false);
const ruleFormRef = ref();

const dragList = ref(props.searchConfig.formList);
const columnRadio = ref(props.searchConfig.searchColumn);
const historyTags = ref(props.searchConfig.searchHistory);

watch(
  () => props.searchConfig.searchHistory,
  (newValue) => {
    historyTags.value = newValue;
  },
);

onMounted(() => {
  if (sortableContainer.value) {
    Sortable.create(sortableContainer.value, {
      onEnd: () => {
        dragEnd();
      },
    });
  }
});

const onSubmit = () => {
  emit("handleSubmit");
};
const onReset = () => {
  emit("handleReset");
};

const dragEnd = () => {
  emit("dragListUpdate", dragList);
};

const columnRadioChange = (val) => {
  emit("columnRadioUpdate", val);
};

const historyClose = (e) => {
  emit("historyUpdate", e);
};
</script>
<style lang="scss" scoped>
.table-query-panel {
  width: 100%;
  .container {
    display: flex;
    justify-content: space-between;
    .container-form {
      width: calc(100% - 300px);
      display: flex;
      max-height: 150px;
      overflow-y: auto;
    }
    .container-control {
      display: flex;
      justify-content: space-between;
      .control-btn {
        width: 164px;
        margin-top: 30px;
        border-right: 1px dashed #eee;
        margin-right: 20px;
        .btn-group {
          margin-top: 20px;
        }
      }
      .control-history {
        width: 160px;
        margin-top: 10px;
      }
    }
  }
}

.itxst {
  width: 600px;
  display: flex;
}
.itxst > div:nth-of-type(1) {
  flex: 1;
}
.itxst > div:nth-of-type(2) {
  width: 270px;
  padding-left: 20px;
}
.item {
  width: 100px;
  border: solid 1px #eee;
  padding: 6px 10px;
  text-align: left;
}

.item:hover {
  cursor: move;
}

.ghost {
  border: solid 1px rgb(19, 41, 239);
}
.chosenClass {
  background-color: #f1f1f1;
}

.group-drag > div:nth-child(1) {
  display: flex;
  flex-wrap: wrap;
}
</style>
